import React from 'react';
import PageTitle from 'component/page-title/PageTitle.jsx';

import MUtil from 'util/MUtil.jsx';
const mUtil = new MUtil();
import ProductService from 'service/ProductService.jsx';
const productService = new ProductService();
import CategorySelector from 'page/product/index/CategorySelector.jsx';
import FileUploadUtil from 'util/FileUploadUtil.jsx';

import '../index/category-selector.styl';

class ProductDetail extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      id: this.props.match.params.pid,
      name: '',
      subtitle: '',
      categoryId: 0,
      parentCategoryId: 0,
      subImages: [],
      detail: '',// 富文本
      price: '',
      stock: '',// 库存数
      status: 1,// 为1表示商品在售
    };
  }
  // {
  //   uri: "73a448d5-8bfb-42f0-abbb-6485e491c9fb.jpg",
  //   url: "http://img.happymmall.com/73a448d5-8bfb-42f0-abbb-6485e491c9fb.jpg"
  // }

  componentDidMount() {
    if (this.state.id) { // 如果为true，则表明是编辑，否则为添加
      productService.getProduct(this.state.id)
        .then(res => {
          let images = res.data.subImages.split(',');
          res.data.subImages = images.map(imgUri => {
            return {
              uri: imgUri,
              url: res.data.imageHost + imgUri
            }
          });
          this.setState(res.data);
          // this.setState({ subImages: res.data.subImages });
        }
          , errMsg => mUtil.errorTips(errMsg));
    }
  }

  render() {
    return (
      <div id="page-wrapper">
        <PageTitle title='商品详情' />
        <div className="form-horizontal">
          <div className="form-group">
            <label className="col-md-2 control-label">商品名称</label>
            <div className="col-md-5">
              <p className="form-control-static">{this.state.name}</p>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品描述</label>
            <div className="col-md-5">
              <p className="form-control-static">{this.state.subtitle}</p>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">所属分类</label>
            <CategorySelector readOnly
              categoryId={this.state.categoryId} parentCategoryId={this.state.parentCategoryId} />
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品价格</label>
            <div className="col-md-3">
              <div className="input-group">
                <input type="number" className="form-control"
                  value={this.state.price} readOnly />
                <span className="input-group-addon">元</span>
              </div>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品库存</label>
            <div className="col-md-3">
              <div className="input-group">
                <input type="number" className="form-control"
                  value={this.state.stock} readOnly />
                <span className="input-group-addon">件</span>
              </div>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品图片</label>
            <div className="col-md-10">
              {
                this.state.subImages.length ? this.state.subImages
                  .map((image, index) => (
                    <div className="img-con" key={index}>
                      <img src={image.url} className="img" />
                    </div>))
                  : (<div>暂无图片</div>)
              }
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品详情</label>
            <div className="col-md-10" dangerouslySetInnerHTML={{ __html: this.state.detail }} ></div>
          </div>
        </div>
      </div>
    );
  }
}
export default ProductDetail;